<template>
  <div style="margin: 30px">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      style="width: 1000px"
    >
      <el-form-item label="文章标题" prop="name">
        <el-input
          v-model="ruleForm.title"
          placeholder="请输入文章标题"
        />
      </el-form-item>
      <el-form-item label="标签分类" prop="region">
        <el-select v-model="ruleForm.category_id" placeholder="请选择文章标签">
          <el-option
            v-for="(item, index) of category"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否设置热门" prop="delivery">
        <el-switch
          v-model="ruleForm.hot"
          :active-value="1"
          :inactive-value="0"
          active-color="#02538C"
          inactive-color="#B9B9B9"
        />
      </el-form-item>
      <el-form-item label="图片上传" prop="delivery">
        <el-upload
          class="avatar-uploader"
          action
          :show-file-list="false"
          style="margin: 20px; float: left"
          :http-request="uploadImage"
        >
          <img
            v-if="ruleForm.description_image_path"
            :src="ruleForm.description_image_path"
            class="avatar"
          >
          <i v-else class="el-icon-plus avatar-uploader-icon" style="" />
        </el-upload>
      </el-form-item>
      <el-form-item label="文章编辑" prop="delivery" style="width: 1000px">
        <Tinymce :value="ruleForm.content" @input="editor" />
      </el-form-item>
      <el-form-item>
        <el-button v-if="id" type="primary" @click="handleEdit">编辑文章</el-button>
        <el-button v-else type="primary" @click="handleAdd">发表文章</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// const Tinymce = () => import("@/components/Tinymce");
import Tinymce from '@/components/Tinymce'
import { upload } from '@/fs'
import { getArticleId, articleAdd, articleEdit } from '@/api/article'
import { getCategory } from '@/api/category'
export default {
  name: 'ArticleEdit',
  components: {
    Tinymce
  },
  data() {
    return {
      ruleForm: {
        description_image_path: '',
        hot: 0
      },
      rules: {},
      category: [],
      id: undefined
    }
  },
  created() {
    const { id } = this.$route.query
    if (id !== undefined) {
      this.query(id)
    }
    this.getCategory()
  },
  methods: {
    query(id) {
      getArticleId(id).then((res) => {
        this.ruleForm = res[0]
      })
    },
    // 获取分类
    getCategory() {
      getCategory().then((res) => {
        this.category = res
      })
    },
    // 富文本编辑
    editor(val) {
      this.ruleForm.content = val
    },
    // 新增文章
    handleAdd(val) {
      // 将分类标签填入
      this.category.forEach((e) => {
        if (e.id === this.ruleForm.category_id) {
          this.ruleForm.category_name = e.name
          return
        }
      })
      articleAdd(this.ruleForm).then((res) => {
        this.$message.success('文章添加成功')
        this.$router.push('/articleList')
        this.ruleForm = {}
      })
    },
    // 发送编辑
    handleEdit() {
      // 将分类标签填入
      this.category.forEach((e) => {
        if (e.id === this.ruleForm.category_id) {
          this.ruleForm.category_name = e.name
          return
        }
      })
      articleEdit(this.ruleForm).then((res) => {
        this.$message.success('文章编辑成功')
        this.$router.push('/articleList')
        this.ruleForm = {}
      })
    },
    uploadImage({ file }) {
      upload(file).then((res) => {
        this.ruleForm.description_image_path = res.code
      })
    }
  }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
